<template>
  <div class="banner-container">
    <swiper
      :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
      }"
      :pagination="{ clickable: true }"
      :navigation="true"
      class="banner-swiper"
    >
      <swiper-slide v-for="(slide, index) in bannerData" :key="index">
        <a :href="slide.link" target="_blank" class="banner-link">
          <img :src="slide.image" :alt="slide.title" class="banner-image" />
          <div class="banner-content">
            <h1 class="title-line-1">{{ slide.titleLine1 }}</h1>
            <h2 class="title-line-2">{{ slide.titleLine2 }}</h2>
            <h3 class="title-line-3">{{ slide.titleLine3 }}</h3>
          </div>
        </a>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination, Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

// 定义 props
const props = defineProps({
  bannerData: {
    type: Array,
    required: true,
    default: () => [],
  },
})
</script>

<style scoped>
.banner-container {
  width: 100%;
  height: 500px;
  position: relative;
}

.banner-swiper {
  width: 100%;
  height: 100%;
}

.banner-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.title-line-1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.title-line-2 {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.title-line-3 {
  font-size: 2rem;
}

:deep(.swiper-pagination-bullet) {
  background: #fff;
}

:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  color: #fff;
}
</style>
